<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>沉底定位</title>
    <style>
        .way1{
            display: flex;
            flex-flow: column;
            height: 100%;
            justify-content: space-between;
            /* 这个方法需要设置body和thml高度100%否则不生效 */
        }
        .way2{
                height: calc(100vh - 20px);
                display: flex;
                flex-flow: column;
                justify-content: space-between;
        }
        .way3{
            position: absolute;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- <div class="container way1">
        <div class="top">top</div>
        <div class="center">center</div>
        <div class="footer">bottom</div>
    </div> -->
<!-- <div class="container way2">
    <div class="top">top</div>
    <div class="center">center</div>
    <div class="footer">bottom</div>
</div> -->
<div class="container way3">
    <div class="top">top</div>
    <div class="center">center</div>
    <div class="footer" style="position: absolute;
    bottom: 0;">bottom</div>
</div>
</body>
</html>